<script setup lang="ts">
import projPackage from '@/../../../package.json'
import { Logo } from '@fl/components'
import { genBgUrl, oss } from '@fl/logics/oss'
import { useAppStore } from '@fl/store/modules/app'
import { ElMessage } from 'element-plus'
import { unref } from 'vue'

import AccountLoginForm from './account-login-form.vue'
import MobileLoginForm from './mobile-login-form.vue'

const appStore = useAppStore()

const title = computed(() => appStore.getTitle)

const loginBg = genBgUrl(oss.login.bg)

const activeForm = ref<number>(1)

function forgetPassword() {
    ElMessage.warning('请联系管理员')
}
</script>

<template>
    <div class="body"
         :style="loginBg"
    >
        <div class="bg-red/85 absolute h-full w-600 z-50">
            <div class="ml-80 mt-80">
                <div class="flex">
                    <Logo inverse
                          :size="80"
                    />

                    <div class="ml-24 flex flex-col justify-between">
                        <div class="i-custom-anju-calligraphy fill-current text-white h-40 w-130" />

                        <div class="i-custom-anju-link fill-current text-white h-24 w-130" />
                    </div>
                </div>

                <div class="mt-84 text-36 text-white font-600 grid gap-20">
                    <p>登录到</p>

                    <p>{{ title }}</p>
                </div>

                <div class="mt-10 text-white font-600">
                    {{ projPackage.version }}
                </div>
            </div>
        </div>

        <div class="pl-600 flex flex-col h-full justify-center">
            <div class="px-50 pb-30 pt-50 mx-auto bg-white rd-8 shadow-lg flex flex-col w-460 justify-center">
                <div class="mx-auto text-20 text-gray-500 flex items-center">
                    <span :class="`cursor-pointer ${unref(activeForm) === 1 && 'text-brand-red'}`"
                          @click="activeForm = 1"
                    >
                        密码登录
                    </span>

                    <div class="mx-16 bg-black/10 h-16 w-1" />

                    <span :class="`cursor-pointer ${unref(activeForm) === 2 && 'text-brand-red'}`"
                          @click="activeForm = 2"
                    >
                        短信登录
                    </span>
                </div>

                <div class="mt-20">
                    <AccountLoginForm v-show="unref(activeForm) === 1" />

                    <MobileLoginForm v-show="unref(activeForm) === 2" />

                    <ElButton type="primary"
                              link
                              class="text-center w-full"
                              @click="forgetPassword"
                    >
                        忘记密码？
                    </ElButton>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.body {
    width: 100vw;
    height: 100vh;
}
</style>
